<template>
  <div>
    <div class="mbtOP">
      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark">
            <el-breadcrumb separator-class="el-icon-arrow-right">
          
              <el-breadcrumb-item>
                <router-link to="/cy"> 茶叶</router-link>
              </el-breadcrumb-item>
              <el-breadcrumb-item>全部</el-breadcrumb-item>
              <el-breadcrumb-item>列表</el-breadcrumb-item>
              <el-breadcrumb-item>
                {{rel.title}}
                
                  
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div></el-col
        >
      </el-row>
    </div>
   
    <!-- g购物车数据 -->
    <!-- <div v-for="(i,$index) in newarr" :key="$index">
        {{$store.state.arr}}
        <img :src="i.img" alt="">
    </div> -->
       <!-- g购物车数据 -->
    <div class="contentcymb" >
      <div class="contentcymb_child">
        <!-- {{$route.params.tea}} -->
        <div class="box">
          <div class="clearfix">
            <div class="list">
            
              <div class="active">
                  <img :src="rel.img1" alt="">   
              </div>  
              <span></span>
            </div>
            <div class="big">
              <div class="active">
                    <img :src="rel.img1" alt="">
              
              </div>
            
            </div>
            <div class="rightbox"> 
            
            <h1> {{rel.title}}</h1>
            <div class="bottomrig"></div>
            <span class="sp1">{{rel.price}}</span>
            <p>饮茶不但是传统饮食文化，同时，由于茶中含有多种抗氧化物质与抗氧化营养素，对于消除自由基有一定的效果。因此喝茶也有助防老，具养生保健功能，每天喝三两杯茶可起到防老的作用。茶叶中含有多种维生素和氨基酸，喝茶对于清油解腻，增强神经兴奋以及消食利尿也具有一定的作用。 </p>
            <span class="sp2">{{rel.bh}}</span> 
            <span class="sp3">分类：白茶</span>
           
            <div>
              
                 <el-button type="success" @click="btn(i)">加入购物车</el-button>
            <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
            </div>
          <p class="el-icon-thumb">加入收藏</p>
            </div>
          </div>

          <div class="sm">
            <ul>
              <li class="rb">
                <img
                  src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp"
                  alt=""
                />
              </li>
            </ul>
          </div>
        </div>
        
       
      </div>
      
    </div>
  </div>
</template>
<script>
  import fdj from "../component/FAJ";

 
  export default {
    fdj,
    activated() {
      console.log(this.$route);
    },
     methods: {
         btn(a){
           console.log('ok')
this.$store.commit('m_arr',a)
      },
          
    handleChange(value) {
        console.log(value);
      },  
      
    },
    mounted() {
     
       console.log(this.$store.state.arr)
      
      },
   	data() {
			return {
				id: '',
				rel: '',
				num: 1,
				arr1: [

					{
						title: '全部',
						children: [{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 0,
								title: '茉莉花茶',
                price: '￥223.0',
                bh:'商品编号：RE2K2015113 ',
                lb:'绿茶'
							},
							{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wYWQzN2JkNDA4Y2NhYzBjMjRjYmY3N2IwNmI0ODg4MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 1,
								title: '白牡丹',
                price: '￥1，2350',
                 bh:'商品编号： RE2K2015115 ',
                  lb:'绿茶'
							},
							{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC85Nzg1NTAwNmNjMDUwNDU4ZWQwMWZmMTY3YjhiM2Q5Ny00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 2,
								title: '白毫银针',
                price: '￥258.0',
                 lb:'绿茶'
							},
							{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wMzMyODZmNzRlZTgzZmIzZTkxOWVlODAwNzgyNGM1MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 3,
								title: '云南普洱',
                price: '￥500.0',
                 bh:'商品编号： RE2K2015117 ',
                  lb:'黄茶'
							},
							{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yNjVmNTg1ZTlmY2ZiOTEwMGUzNzViYWQwNDI1OTAzMS00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 4,
								title: '湖北老青茶',
                price: '￥400.0',
                 bh:'商品编号： RE2K2015117 ',
                   lb:'黄茶'
							},
							{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yOGVhMWYwNDRjY2E5Yjg1YTNhZmQzMTFjNzNlNjcyNC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 5,
								title: '霍山黄芽濛而银针',
                price: '￥711.0',
                 bh:'商品编号： RE2K2015117 ',
                   lb:'黄茶'
							},
							{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 6,
								title: '茉莉花茶',
                price: '￥223.0',
                 bh:'商品编号： RE2K2015117 ',
                   lb:'黄茶'
							},
							{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wYWQzN2JkNDA4Y2NhYzBjMjRjYmY3N2IwNmI0ODg4MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 7,
								title: '白牡丹',
                price: '￥1，2350',
                 bh:'商品编号： RE2K2015117 ',  
                   lb:'黄茶'
							},
							{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC85Nzg1NTAwNmNjMDUwNDU4ZWQwMWZmMTY3YjhiM2Q5Ny00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 8,
								title: '白毫银针',
                price: '￥258.0',
                 bh:'商品编号： RE2K2015118 ',
                   lb:'黄茶'
							},
							{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wMzMyODZmNzRlZTgzZmIzZTkxOWVlODAwNzgyNGM1MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 9,
								title: '云南普洱',
                price: '￥500.0',
                 bh:'商品编号： RE2K2015118 ',
                   lb:'黄茶'
							},

						]

					},
					{
						title: '绿茶',
						children: [{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 10,
								title: '茉莉花茶',
                price: '￥223.0',
                  bh:'商品编号： RE2K2015118 ',
							},
							{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wYWQzN2JkNDA4Y2NhYzBjMjRjYmY3N2IwNmI0ODg4MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 11,
								title: '白牡丹',
                price: '￥1，2350',
                  bh:'商品编号： RE2K2015118 ',
							},

						]
					},
					{
						title: '黄茶',
						children: [{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yOGVhMWYwNDRjY2E5Yjg1YTNhZmQzMTFjNzNlNjcyNC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 12,
								title: '霍山黄芽濛而银针',
                price: '￥711.0',
                  bh:'商品编号： RE2K2015118 ',
							},
							{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 13,
								title: '茉莉花茶',
                price: '￥223.0',
                  bh:'商品编号： RE2K2015118 ',
							},

						]
					},
					{
						title: '乌龙茶',
						children: [{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yOGVhMWYwNDRjY2E5Yjg1YTNhZmQzMTFjNzNlNjcyNC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 14,
								title: '霍山黄芽濛而银针',
                price: '￥711.0',
                  bh:'商品编号： RE2K2015118 ',
							},
							{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 15,
								title: '茉莉花茶',
                price: '￥223.0',
                  bh:'商品编号： RE2K2015118 ',
							},

						]
					},
					{
						title: '红茶',
						children: [{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yOGVhMWYwNDRjY2E5Yjg1YTNhZmQzMTFjNzNlNjcyNC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 16,
								title: '霍山黄芽濛而银针',
                price: '￥711.0',
                  bh:'商品编号： RE2K2015118 ',
							},
							{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 17,
								title: '茉莉花茶',
                price: '￥223.0',
                  bh:'商品编号： RE2K2015118 ',
							},

						]
					},
					{
						title: '黑茶',
						children: [{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yOGVhMWYwNDRjY2E5Yjg1YTNhZmQzMTFjNzNlNjcyNC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 18,
								title: '霍山黄芽濛而银针',
                price: '￥711.0',
                  bh:'商品编号： RE2K2015118 ',
							},
							{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 19,
								title: '茉莉花茶',
                price: '￥223.0',
                  bh:'商品编号： RE2K2015118 ',
							},

						]
					},
					{
						title: '白茶',
						children: [{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yOGVhMWYwNDRjY2E5Yjg1YTNhZmQzMTFjNzNlNjcyNC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 20,
								title: '霍山黄芽濛而银针',
                price: '￥711.0',
                  bh:'商品编号： RE2K2015118 ',
							},
							{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 21,
								title: '茉莉花茶',
                price: '￥223.0',
                  bh:'商品编号： RE2K2015118 ',
							},

						]
					},
					{
						title: '花茶',
						children: [{
								img1: 'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yOGVhMWYwNDRjY2E5Yjg1YTNhZmQzMTFjNzNlNjcyNC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
								id: 22,
								title: '霍山黄芽濛而银针',
                price: '￥711.0',
                  bh:'商品编号： RE2K2015118 ',
							},

						]
					},
				]
			};

		},

	  created(){
        for(let i=0; i<this.arr1.length; i++){
            for(let j=0; j<this.arr1[i].children.length; j++){
                if(this.arr1[i].children[j].id == this.$route.params.id){
                    this.rel = this.arr1[i].children[j]
                }
            }
        }
    },
  };
</script>
<style scoped>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .rightbox{
    width: 600px;
   position: absolute;
   left: 440px;
   z-index: 2 ;
  display: inline-block;
   
    
  }
  .rightbox h1{
    font-size: 22px;
    font-family: '微软雅黑';
    color: #929292;
    line-height: 30px;
    padding: 2px 0;
  }
   .rightbox p{
     font-size: 19x;
 padding: 15px 0;
   color: #929292;
  
   }
   .rightbox .sp1{
display: block;
padding: 15px;
   }
      .rightbox .sp2{
display: block;
padding: 5px;
font-weight: normal;
font-size: 18px;
border-top:1px dashed #ccc ;
border-bottom:1px dashed #ccc ;
   }
   .rightbox .sp3{
display: block;
padding: 5px;
font-weight: normal;
font-size: 14px;
padding: 15px;

   }
   .el-button{
     background-image: none;
    font-size: 16px;
    font-weight: normal;
    color: #ffffff;
    border-color: #519f10;
    background-color: #519f10;
    padding-top: 13px;
    padding-bottom: 13px;
    padding-left: 24px;
    padding-right: 24px;
   }
  .bottomrig{
    font-weight: normal;
     font-family: '微软雅黑';
    height: 2px;
    width: 30px;
    background-color: #dddddd;
  }
  .rightbox span{
    display: block;
    font-size: 22px;
    font-weight: normal;
    color: #444444;
    font-family: sans-serif;
    line-height: 22px;
  }

  .contentcymb {
    /* width: 100%; */
    min-height: 500px;
    padding: 30px;
  }
  .contentcymb_child {
    width: 80%;
    min-height: 800px;
    margin: auto;
  }
  .mbtOP {
    margin-top: 150px;
    line-height: 100px;
  }
    .el-row {
    margin-bottom: 20px;
    text-align: center;
    line-height: 36px;
  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .list {
    /* width: 400px;
        height: 400px; */
    float: left;
    /* overflow: hidden; */
    position: relative;
  }

  .list div {
    width: 100%;
    height: 100%;
    display: none;
  }

  .list span {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    background: url(https://gtms01.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png);
    display: none;
  }

  .big {
    width: 400px;
    height: 400px;
    float: left;
    display: none;
    overflow: hidden;
    position: relative;
  }
.box{
  position: relative;
 
}
  .box .active {
    display: block;
  }

  .big div {
    width: 100%;
    height: 100%;
    display: none;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
     z-index: 99;
  }
  .big div img {
    width: 800px;
    height: 800px;
  }
  .big img {
    position: absolute;
    left: 0;
    top: 0;
  }

  .clearfix::after {
    display: inline-block;
    clear: both;
    content: "";
   
    
  }
  .sm li {
    float: left;
    margin: 8px;
    border: 1px solid transparent;
  }

  .sm .active {
    border: 1px solid black;
  }
  .sm {
    width: 100px;
    height: 100px;
  }
  .sm img {
    width: 100%;
    height: 100%;
  }
</style>
